<template>
  <el-dialog
    v-model="dialogVisible"
    width="80vw"
    :close-on-click-modal="false"
    @close="handleClose"
  >
   <Title title="自动分配结果" />
    <div class="dialog-container">
      <!-- 统计卡片 -->
      <el-row :gutter="16" class="stats-row">
        <el-col :span="6">
          <div class="stat-card total">
            <div class="stat-value">{{ resultData.totalTeams }}</div>
            <div class="stat-label">总队伍数</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card success">
            <div class="stat-value">{{ resultData.volunteerMatchedTeams }}</div>
            <div class="stat-label">志愿匹配</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card warning">
            <div class="stat-value">{{ resultData.randomMatchedTeams }}</div>
            <div class="stat-label">随机分配</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card danger">
            <div class="stat-value">{{ resultData.unmatchedTeams }}</div>
            <div class="stat-label">未分配</div>
          </div>
        </el-col>
      </el-row>

      <!-- 详细匹配列表 -->
      <div class="detail-section">
        <div class="section-title">匹配详情</div>
        <el-table
          :data="resultData.matchDetails"
          border
          stripe
        >
          <el-table-column
            type="index"
            label="序号"
            align="center"
          />
          <el-table-column
            prop="teamName"
            label="队伍名称"
            align="center"
          />
          <el-table-column
            prop="teacherName"
            label="指导教师"
            align="center"
          />
          <el-table-column
            prop="score"
            label="匹配分数"
            align="center"
          >
            <template #default="{ row }">
              <el-tag :type="getScoreType(row.score)">
                {{ row.score.toFixed(2) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="匹配类型"
            align="center"
          >
            <template #default="{ row }">
              <el-tag :type="row.matchType == 'volunteer' ? 'success' : 'warning'">
                {{ row.matchType == 'volunteer' ? '志愿匹配' : '随机分配' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="teamVolunteerSort"
            label="队伍志愿"
            align="center"
          >
            <template #default="{ row }">
              <span v-if="row.teamVolunteerSort">
                第 {{ row.teamVolunteerSort }} 志愿
              </span>
              <span v-else class="text-muted">-</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="teacherVolunteerSort"
            label="教师志愿"
            align="center"
          >
            <template #default="{ row }">
              <span v-if="row.teacherVolunteerSort">
                第 {{ row.teacherVolunteerSort }} 志愿
              </span>
              <span v-else class="text-muted">-</span>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 匹配说明 -->
      <el-alert
        v-if="resultData.unmatchedTeams > 0"
        title="提示"
        type="warning"
        :closable="false"
        class="mt-16"
      >
        当前有 {{ resultData.unmatchedTeams }} 个队伍未能分配，请检查教师容量或手动分配。
      </el-alert>
      <el-alert
        v-else
        title="分配完成"
        type="success"
        :closable="false"
        class="mt-16"
      >
        所有队伍已成功分配！其中志愿匹配 {{ resultData.volunteerMatchedTeams }} 个，
        随机分配 {{ resultData.randomMatchedTeams }} 个。
      </el-alert>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import Title from '@/components/Title/index.vue'



const dialogVisible = ref(false)
const resultData = ref({
  totalTeams: 0,
  volunteerMatchedTeams: 0,
  randomMatchedTeams: 0,
  unmatchedTeams: 0,
  matchDetails: []
})

// 打开对话框
const openDialog = (data) => {
  resultData.value = data
  dialogVisible.value = true
}

// 关闭对话框
const handleClose = () => {
  dialogVisible.value = false
}

// 确认操作
const emit = defineEmits(['confirm'])
const handleConfirm = () => {
  emit('confirm')
  handleClose()
}

// 根据分数获取标签类型
const getScoreType = (score) => {
  if (score >= 10) return 'success'
  if (score >= 5) return ''
  return 'info'
}

// 暴露方法给父组件
defineExpose({
  openDialog
})
</script>

<style scoped lang="scss">
.dialog-container {
  .stats-row {
    margin-bottom: 24px;
  }

  .stat-card {
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    transition: all 0.3s;

    &:hover {
      transform: translateY(-4px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .stat-value {
      font-size: 32px;
      font-weight: bold;
      margin-bottom: 8px;
    }

    .stat-label {
      font-size: 14px;
      color: #666;
    }

    &.total {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;

      .stat-label {
        color: rgba(255, 255, 255, 0.9);
      }
    }

    &.success {
      background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
      color: white;

      .stat-label {
        color: rgba(255, 255, 255, 0.9);
      }
    }

    &.warning {
      background: linear-gradient(135deg, #e6a23c 0%, #f3c571 100%);
      color: white;

      .stat-label {
        color: rgba(255, 255, 255, 0.9);
      }
    }

    &.danger {
      background: linear-gradient(135deg, #f56c6c 0%, #f89898 100%);
      color: white;

      .stat-label {
        color: rgba(255, 255, 255, 0.9);
      }
    }
  }

  .detail-section {
    .section-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 16px;
      color: #303133;
    }
  }

  .text-muted {
    color: #909399;
  }

  .mt-16 {
    margin-top: 16px;
  }
}
</style>
